<template>
    <div class="page-container" v-loading="loading">
        <yh-card class="table-container">
            <yh-toolbar custom>
                <template #buttons>
                    <el-button icon="el-icon-refresh" class="tool-btn" @click="flash">刷新</el-button>
                </template>
            </yh-toolbar>
            <yh-table
                :data="data"
                class="fund_position_monitoring"
                selectionFixed
                round
                highlight-current-row
                element-loading-text="拼命加载中..."
                :border="true"
                resizable
                :showIndex="false"
                :show-selection="false"
                v-fit-columns
                :column-config="{ isCurrent: true, isHover: true }"
                :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
                @edit-closed="editClosedEvent"
            >
                <!-- <yh-table-column field="exportUser" title="导出人" min-width="150px" header-align="center" align="center"></yh-table-column> -->

                <yh-table-column field="fileName" title="文件名称" min-width="150px" header-align="center" align="center"></yh-table-column>
                <yh-table-column field="status" title="导出状态" min-width="150px" header-align="center" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == '1'">导出中</span>
                        <span v-if="scope.row.status == '2'">导出完成</span>
                        <span v-if="scope.row.status == '3'">出错</span>
                    </template>
                </yh-table-column>
                <yh-table-column field="updateTimeStr" title="更新时间" min-width="150px" header-align="center" align="center" sortable></yh-table-column>
                <!-- <yh-table-column field="msg" title="详情" min-width="150px" header-align="center" align="center"></yh-table-column> -->
                <yh-table-column field="" title="操作" min-width="150px" header-align="center" align="center" fixed="right">
                    <template slot-scope="scope">
                        <yh-table-button
                            size="small"
                            type="text"
                            v-if="scope.row.status == '2'"
                            icon="yh el-icon-download color-primary"
                            content="下载"
                            @click="download(scope.row)"
                        />
                        <yh-table-button size="small" type="text" icon="yh el-icon-delete color-primary" content="取消" @click="delete_(scope.row)" />
                        <yh-table-button size="small" type="text" icon="yh el-icon-info color-primary" content="详情" @click="info(scope.row)" />
                    </template>
                </yh-table-column>
            </yh-table>
        </yh-card>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span v-html="msg"></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { downLoadFile } from '@/utils/request';
@Component({})
export default class RiskResultDownload extends Vue {
    private loading = false;
    private dialogVisible = false;
    private msg;
    private data = [];
    public mounted() {
        // debugger;
        this.queryByCurrentUser();
    }
    public flash() {
        this.queryByCurrentUser();
    }

    // 获取图表数据
    private queryByCurrentUser(): void {
        // debugger;
        this.$axios.get('/staticExport/queryByCurrentUser').then((res: any) => {
            if (res !== null) {
                // console.info(res);
                this.data = res;
            } else {
                this.yh_message_warn('未能查询到符合条件的结果');
            }
        });
    }

    private download(row: any): void {
        this.$confirm('是否下载文件' + row.fileName + '?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
        }).then(() => {
            this.loading = true;
            const url = `/staticExport/${row.id}`;
            downLoadFile({
                url: url,
                method: 'get',
            }).then(e => {
                this.loading = false;
                this.queryByCurrentUser();
            });
        });
    }

    delete_(row: any) {
        this.$confirm('是否取消下载文件' + row.fileName + '?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
        }).then(() => {
            // debugger;
            this.$axios.delete(`/staticExport/${row.id}`).then((res: any) => {
                if (res == 'SUCCESS') {
                    this.yh_message_success('删除成功');
                } else {
                    this.yh_message_warn('未能查询到符合条件的结果');
                }
                this.queryByCurrentUser();
            });
        });
    }

    info(row: any) {
        this.msg = row.msg;
        // debugger;
        this.$axios.get(`/staticExport/info/${row.id}`).then((res: any) => {
            if (res) {
                this.msg = res.info;
                this.dialogVisible = true;
                if (!res.info) {
                    this.msg = '暂无导出日志！';
                }
            } else {
                this.yh_message_warn('未能查询到符合条件的结果');
            }
        });
    }
}
</script>
<style lang="scss" scoped>
/deep/.table-container .vxe-table {
    height: calc(100vh - 140px);
    .vxe-table--body-wrapper {
        height: calc(100vh - 180px);
    }
    .fixed-right--wrapper,
    .fixed-left--wrapper {
        height: calc(100vh - 194px);
    }
}
</style>
